<template>
    <view class="my-groups">
		<!-- #ifdef H5 || APP-PLUS -->
		<uni-nav-bar dark left-icon="left" :fixed="true" title="我的群组" :right-text="userType==1?'创建群组':''" background-color="#fff" color="#262E3F"  @clickLeft="goBack()" @clickRight="createGroup()" />
		<!-- #endif -->
		<view class="uni-tab">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" @click="ontabtap(index)">
				<text class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
			</view>
		</view>
		<view class="line-h"><text :style="{left: tabIndex==0?0:'50%'}"></text></view>
		<swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">
			<swiper-item class="swiper-item" v-for="(tab,index1) in tabBars" :key="index1">
				<view class="no-group" v-if="index1==0&&runChatGroup.length==0 || index1==1&&chatGroupUsers.length==0">
					暂无群聊
				</view>
				<view class="group-list" v-if="index1==0">
					<view class="group-info" v-for="(item, i) in runChatGroup" :key="i" @click="groupDetail(item.id)">
						<image class="logo" :src="`/static/txl/qlx${item.type>3?'3':item.type}.png`" mode="aspectFill"></image>
						<text class="name">{{item.name}}</text>
						<text :class="['tag', 'tag-bg'+item.type]">{{item.type==1?'校级':item.type==2?'年级':'班级'}}</text>
					</view>
				</view>
				<view class="group-list" v-else-if="index1==1">
					<view class="group-info" v-for="(item, i) in chatGroupUsers" :key="i" @click="groupDetail(item.id)">
						<image class="logo" :src="`/static/txl/qlx${item.type>3?'3':item.type}.png`" mode="aspectFill"></image>
						<text class="name">{{item.name}}</text>
						<text :class="['tag', 'tag-bg'+item.type]">{{item.type==1?'校级':item.type==2?'年级':'班级'}}</text>
					</view>
				</view>
			</swiper-item>
		</swiper>
    </view>
</template>
<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
    export default {
		components: {
			uniNavBar
		},
        data() {
            return {
				userType: '',
				managedGroup: [],
				partGroup: [],

                tabIndex: 0,
                tabBars: [{
                    name: '我管理的群组',
                    id: '1'
                }, {
                    name: '我加进的群组',
                    id: '2'
                }],
				chatGroupUsers: [],
				runChatGroup: []
            }
        },
		onNavigationBarButtonTap(e){
			this.createGroup()
		},
		onLoad(){
			// #ifndef H5
			let currentWebview = this.$scope.$getAppWebview()
			let titleObj = currentWebview.getStyle().titleNView;
			titleObj.buttons[0].text = '';
			currentWebview.setStyle({
				titleNView: titleObj
			});
			// #endif
		},
        onShow() {
			uni.removeStorageSync('xdSelectAllInfo')
            this.getList(0);
        },
        methods: {
            getList(index) {
				this.api.get('mailList/myChatGroup').then(res=>{
					if(res.data.state!='ok') return;
					let userInfo = getApp().globalData.userInfo;
					this.userType = userInfo.user_type
					let data = res.data;
					this.chatGroupUsers = data.chatGroupUsers;
					this.runChatGroup = data.runChatGroup || [];
				})
            },
			createGroup(){
				uni.navigateTo({
					url: '/pages/addressBook/create-group',
					animationType: 'slide-in-bottom',
				})
			},
            ontabtap(i) {
                this.tabIndex = i
            },
            ontabchange(e) {
                let index = e.target.current || e.detail.current;
                this.switchTab(index);
            },
            switchTab(index) {
                
            },
			goBack(){
				uni.switchTab({
					url: '/pages/addressBook/address-book'
				})
			},
			groupDetail(id){
				let userInfo = getApp().globalData.userInfo;
				let type = userInfo.roleIds?2:1
				uni.navigateTo({
					url: `/pages/chatSystem/group-msg?examId=${id}&type=${type}`
				})
			},
        }
    }
</script>

<style lang="less" scoped>
	.my-groups{
		flex: 1;
	}
	.uni-tab{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.uni-tab-item-title-active{
		color: #02A7F0;
	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
		position: relative;
		text{
			position: absolute;
			top: 0;
			left: 0;
			width: 50%;
			height: 1rpx;
			background: #02A7F0;
			transition: all .3s;
		}
	}

	.uni-tab-item {
		height: 80rpx;
		line-height: 80rpx;
		width: 50%;
		text-align: center;
	}
	
	.swiper-box {
		flex: 1;
		height: calc(100vh - 80rpx - 44px - 1rpx);
	}

	.swiper-item {
		// margin: 0 40rpx;
		flex: 1;
		flex-direction: row;
	}
	.no-group{
		margin-top: 100rpx;
		text-align: center;
		
	}
	.group-list{
		margin: 0 32rpx;
	}
	.group-info{
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		.name{
			margin-right: 30rpx;
			font-size: 28rpx;
		}
	}
	.logo{
		margin-right: 20rpx;
		width: 80rpx;
		height: 80rpx;
	}
	.tag{
		padding: 0 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #fff;
		border-radius: 10rpx;
	}
	.tag-bg1{
		background-color: #0000bf;
	}
	.tag-bg2{
		background-color: #f7931e;
	}
	.tag-bg3{
		background-color: #00ff00;
	}
	.tag-bg4{
		background-color: #02a7f0;
	}
</style>
